<template>
    <div>
        <h1>房号列表显示</h1>
        <input type="button" value="批量下架" @click="updatestateALL(ids, 0)">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @click="checkALL()"></td>
                    <td>房号id</td>
                    <td>房型名称</td>
                    <td>房号</td>
                    <td>备注</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in houseNumberList">
                    <td><input type="checkbox" :value="item.houseNumberId" v-model="ids" @change="checkone()"></td>
                    <td>{{ item.houseNumberId }}</td>
                    <td>{{ item.houseTypeName }}</td>
                    <td>{{ item.houseNumbers }}</td>
                    <td>{{ item.desc }}</td>
                    <td>{{ item.state ? "上架" : "下架" }}</td>
                    <td><input type="button" value="编辑" @click="Update(item.houseNumberId)"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue';
import moment from 'moment';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

onMounted(() => {
    gethouseNumberList();
})

let checked: any = ref(false);
let ids: any = ref([]);

const checkALL = () => {
    checked.value = !checked.value;
    if (checked.value == true) {
        ids.value = houseNumberList.value.map((item: any) => {
            return item.houseNumberId;
        })
    }
    else {
        ids.value = [];
    }
}
const checkone = () => {
    if (ids.value.length == houseNumberList.value.length) {
        checked.value = true;
        return;
    }
    else {
        checked.value = false;
        return;
    }
}
let houseNumberList: any = ref([]);
const gethouseNumberList = () => {
    axios({
        url: '/api/House/GetHouseNumberList',
        method: 'get',
    })
        .then(res => {
            houseNumberList.value = res.data;
        })
        .catch(err => {

        })
}
const Update = (id: any) => {
    router.push({
        path: '/houseNumberUpdate',
        query: { id: id }
    })
}
const updatestateALL = (ids: any, state: any) => {
    // if (ids.value.length == "") {
    //     alert("必选一项");
    //     return;
    // }
    if (confirm("你确定要修改吗")) {

        axios({
            url: '/api/House/UpdateStateALL',
            method: 'put',
            params: {
                ids: ids.toString(),
                state: state,
            }
        })
            .then(res => {
                if (res.data > 0) {
                    alert("修改成功");
                    gethouseNumberList();
                    checked.value == false;
                    return;
                }
                else {
                    alert("修改失败");
                    ids.value = false;
                    return;
                }
            })
            .catch(err => {

            })
    }

}
</script>

<style scoped></style>